import React, {Component} from 'react';

import styles from './OrderAddress.css';
import OrderAddressPros from "../pros/OrderAddressPros";
import Form from "antd/lib/form/Form";
import {Button, Icon, Input, message, Select} from "antd";
import TextArea from "antd/lib/input/TextArea";
import GiftGoodsService from "../../business/gift/GiftGoodsService";
import {GiftOrderProcessDomain} from "../../business/gift/GiftOrderProcessDomain";
import {Redirect} from "react-router";
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const { Option } = Select;
class OrderAddress extends Component<OrderAddressPros,any>{

  constructor(props){
    super(props);
    this.state ={
      giftOrder:new GiftOrderProcessDomain(),
      loading:false,
      success:false,
      orderNo:'',
    };
    this.state.giftOrder.address="上海";
    this.giftGoodsService = new GiftGoodsService();
    this.handleChangeNumber = this.handleChangeNumber.bind(this);
    this.handleChangeRealName = this.handleChangeRealName.bind(this);
    this.handleChangeMessage = this.handleChangeMessage.bind(this);
    this.selectAddress= this.selectAddress.bind(this);
    this.handleSubmit =this.handleSubmit.bind(this);
    this.orderSuccess =this.orderSuccess.bind(this);
  }
  giftGoodsService:GiftGoodsService;

  handleChangeMessage(event){
    const {giftOrder} = this.state;
    giftOrder.userMessage =  event.target.value;
    this.setState({ giftOrder : giftOrder});
  }

  handleChangeNumber(event) {
    const {giftOrder} = this.state;
    giftOrder.cellphoneNumber =  event.target.value;
    this.setState({ giftOrder : giftOrder});
  }
  handleChangeRealName(event){
    const {giftOrder} = this.state;
    giftOrder.realName =  event.target.value;
    this.setState({ giftOrder : giftOrder});
  }

  selectAddress(value) {
    const {giftOrder} = this.state;
    giftOrder.address= value;
    this.setState({ giftOrder : giftOrder});
  }


  handleSubmit(e){
    this.setState({loading:true});
    let token = sessionStorage.getItem('loginToken');
    let data :GiftOrderProcessDomain= this.state.giftOrder;
    const {gift,exchangeNumber} = this.props;
    data.username = sessionStorage.getItem('username');
    data.goodsName = gift.goodsName;
    data.quantity = exchangeNumber;
    data.goodsSn = gift.goodsSn;
    this.giftGoodsService.giftOrderProcess(token,data,this.orderSuccess);
  }

  orderSuccess(res,isSuccess){
    if(!isSuccess||res.code !='000000'){
      message.info(res.message);
      this.setState({loading:false});
      return;
    }else{
      this.setState({success:true,orderNo:res.data});
    }
  }


  render() {
    const {gift,exchangeNumber} = this.props;
    const {giftOrder,success,orderNo} = this.state;
    if(success){
      return <Redirect to={{
        pathname:"/point-shopping/Order",
        state:{
          bodyName:3,
          orderNo:orderNo,
        }
      }}/>;
    }
    return (
      <div className={styles.address_transport}>
        <Form
          onSubmit={this.handleSubmit}>
          <div className={styles.trans_left}>
            <h1><span className={styles.trans_sp}><i className={styles.transa}></i>收货人地址</span></h1>
              <Form.Item
                {...formItemLayout}
                label="地 址"
              >
                <Select placeholder="请选择收货地址" onChange={this.selectAddress} defaultValue={"上海"} value={giftOrder.address}>
                  <Option value="上海">上海</Option>
                  <Option value="深圳">深圳</Option>
                  <Option value="成都">成都</Option>
                  <Option value="北京">北京</Option>

                </Select>
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label="真实姓名">
                <Input
                  placeholder="真实姓名" value={giftOrder.realName} onChange={this.handleChangeRealName}/>

              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label="手机号">
                <Input
                  placeholder="手机号" value={giftOrder.cellphoneNumber} onChange={this.handleChangeNumber}/>

              </Form.Item>

            <h1>
              <span className={styles.trans_sp}>
                <i className="transb"></i>
                我要留言
              </span>
            </h1>
            <div className={styles.trans_text}>
              <Form.Item
                {...formItemLayout}
                label="留言"
              >
                <TextArea name='userMessage' onChange={this.handleChangeMessage}>{giftOrder.userMessage}</TextArea>
              </Form.Item>
            </div>
            <div className={styles.trans_integ}>所需总积分:<strong>{exchangeNumber*gift.goodsPoints}</strong>分</div>
            <div className={styles.trans_integ}>
              <span className={styles.trans_submit}>
                <Button className={[styles["mod-btn"],styles["mod-btn-shop-orange"]].join(' ')} type="primary" key="submit" loading={this.state["loading"]} onClick={this.handleSubmit}>兑换完成</Button>
              </span>
            </div>
          </div>
        </Form>
        <div className={styles.trans_right}>
          <h1><span className={styles.trans_sp}><i className={styles.transc}></i>已选礼品</span></h1>
          <ul>
            <li>
              <span>
                <a href="" >
                  <img src={process.env.POINT_SHOPPING_URL+"/point-shopping/goods/show/"+gift.goodsImageName}
                       width="100" height="100"/>
                </a>
              </span>
              <h2>
                <a href="" >{gift.goodsName}
                </a>
              </h2>
              <i>{exchangeNumber}个=<strong>{exchangeNumber*gift.goodsPoints}</strong></i>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}
export default OrderAddress
